var headerTemplate = `
<div>
    <header>
        <div class="top_bar" @click="closeMenu()">
            <div class="container">
                <div class="top_header_content">
                    <div class="menu_logo" id="1">
                        <a href="#" title="" class="menu" @click="showLeftMenu()">
                            <i class="icon-menu"></i>
                        </a>
                        <a href="#" title="" class="logo">
                            <img src="images/logo2.png" alt="">
                        </a>
                    </div>
                    <!--menu_logo end-->
                    <div class="btm_bar">
                        <div class="container">
                            <div class="btm_bar_content">
                                <nav>
                                    <ul>
                                        <li><a href="index.html" target="_top" title="">主页</a></li>
                                        <li><a href="Browse_Categories.html" target="_top" title="">分类</a></li>
                                        <li><a href="Search_Page.html" target="_top" title="">搜索</a></li>
                                        <!-- <li><a href="#" title="">排行榜</a></li> -->
                                    </ul>
                                </nav>
                                <!--navigation end-->
                                <ul class="shr_links">
                                    <li>
                                        <h3>Go to : </h3>
                                    </li>
                                    <li>
                                        <button data-toggle="tooltip" data-placement="top" title="Like">
                                            <i class="icon-like"></i>
                                        </button>
                                    </li>
                                    <li>
                                        <button  data-toggle="tooltip" data-placement="top"
                                            title="Watch later">
                                            <i class="icon-watch_later"></i>
                                        </button>
                                    </li>
                                    <li>
                                        <button @click="history()" data-toggle="tooltip" data-placement="top"
                                            title="History">
                                            <i class="icon-history"></i>
                                        </button>
                                    </li>
                                </ul>
                                <!--shr_links end-->
                                <!-- <div class="clearfix"></div> -->
                            </div>
                            <!--btm_bar_content end-->
                        </div>
                    </div>
                    <!--btm_bar end-->
                    <div class="search_form">
                        <form>
                            <input type="text" name="search" v-model="search" placeholder="">
                            <button type="button" @click="toSearch()">
                                <i class="icon-search"></i>
                            </button>
                        </form>
                    </div>
                    <!--search_form end-->
                    <ul class="controls-lv">
                        <li>
                            <a href="#" title=""><i class="icon-message"></i></a>
                        </li>
                        <li>
                            <a href="#" title=""><i class="icon-notification"></i></a>
                        </li>
                        <li class="user-log" @click="showMenu()">
                            <div class="user-ac-img">
                                <img :src="user.userImage">
                          
                            </div>
                            <div class="account-menu">
                                <h4>AZYRUSMAX <span class="usr-status">PRO</span></h4>
                                <div class="sd_menu">
                                    <ul class="mm_menu">
                                        <li>
                                            <span>
                                                <i class="icon-user"></i>
                                            </span>
                                            <a href="User_Detail.html" title="">个人中心</a>
                                        </li>
                                        <li>
                                            <span>
                                                <i class="icon-paid_sub"></i>
                                            </span>
                                            <a href="#" title="">Paid subscriptions</a>
                                        </li>
                                        <li>
                                            <span>
                                                <i class="icon-settings"></i>
                                            </span>
                                            <a href="#" title="">Settings</a>
                                        </li>
                                        <li>
                                            <span>
                                                <i class="icon-logout"></i>
                                            </span>
                                            <a href="#" @click="loginOut()" title="">退出登录</a>
                                        </li>
                                    </ul>
                                </div>
                                <!--sd_menu end-->
                                <div class="sd_menu scnd">
                                    <ul class="mm_menu">
                                        <li>
                                            <span>
                                                <i class="icon-light"></i>
                                            </span>
                                            <a href="#" title="">Dark Theme</a>
                                            <label class="switch">
                                                <input type="checkbox">
                                                <b class="slider round"></b>
                                            </label>
                                        </li>
                                        <li>
                                            <span>
                                                <i class="icon-language"></i>
                                            </span>
                                            <a href="#" title="">Language</a>
                                        </li>
                                        <li>
                                            <span>
                                                <i class="icon-feedback"></i>
                                            </span>
                                            <a href="#" title="">Send feedback</a>
                                        </li>
                                        <li>
                                            <span>
                                                <i class="icon-location"></i>
                                            </span>
                                            <a href="#" title="">India</a>
                                            <i class="icon-arrow_below"></i>
                                        </li>
                                    </ul>
                                </div>
                                <!--sd_menu end-->
                                <div class="restricted-mode">
                                    <h4>Restricted Mode</h4>
                                    <label class="switch">
                                        <input type="checkbox" checked>
                                        <span class="slider round"></span>
                                    </label>
                                    <div class="clearfix"></div>
                                </div>
                                <!--restricted-more end-->
                            </div>
                        </li>
                        <li>
                            <a href="Upload_Edit.html" title="" class="btn-default">投稿</a>
                        </li>
                    </ul>
                    <!--controls-lv end-->
                    <div class="clearfix"></div>
                </div>
                <!--top_header_content end-->
            </div>
        </div>
        <!--header_content end-->
    </header> 
    <div class="side_menu leaveTop" ref="leftMenu">
    <div class="form_dvv">
        <a href="#" title="" class="login_form_show">注册</a>
    </div>
    <div class="sd_menu">
        <ul class="mm_menu">
            <li>
                <span>
                    <i class="icon-home"></i>
                </span>
                <a href="index.html" title="">主页</a>
            </li>
            <li>
                <span>
                    <i class="icon-fire"></i>
                </span>
                <a href="#" title="">排行</a>
            </li>
            <li>
                <span>
                    <i class="icon-subscriptions"></i>
                </span>
                <a href="#" title="">订阅</a>
            </li>
        </ul>
    </div>
    <!--sd_menu end-->
    <div class="sd_menu">
        <h3>资源</h3>
        <ul class="mm_menu">
            <li>
                <span>
                    <i class="icon-history"></i>
                </span>
                <a href="History_Page.html" title="">历史</a>
            </li>
            <li>
                <span>
                    <i class="icon-watch_later"></i>
                </span>
                <a href="#" title="">稍后观看</a>
            </li>
            <li>
                <span>
                    <i class="icon-purchased"></i>
                </span>
                <a href="#" title="">购买</a>
            </li>
            <li>
                <span>
                    <i class="icon-like"></i>
                </span>
                <a href="#" title="">我的点赞</a>
            </li>
            <li>
                <span>
                    <i class="icon-play_list"></i>
                </span>
                <a href="#" title="">播放列表</a>
            </li>
        </ul>
    </div>
    <!--sd_menu end-->
    <div class="sd_menu subs_lst">
        <h3>订阅</h3>
        <ul class="mm_menu">
            <li>
                <span class="usr_name">
                    <img src="images/resources/th1.png" alt="">
                </span>
                <a href="#" title="">忠爷</a>
                <small>3</small>
            </li>
            <li>
                <span class="usr_name">
                    <img src="images/resources/th2.png" alt="">
                </span>
                <a href="#" title="">强爷</a>
                <small>6</small>
            </li>
            <li>
                <span class="usr_name">
                    <img src="images/resources/th3.png" alt="">
                </span>
                <a href="#" title="">彪爷</a>
                <small>2</small>
            </li>
            <li>
                <span class="usr_name">
                    <img src="images/resources/th4.png" alt="">
                </span>
                <a href="#" title="">辉爷</a>
                <small>11</small>
            </li>
            <li>
                <span class="usr_name">
                    <img src="images/resources/th5.png" alt="">
                </span>
                <a href="#" title="">东爷</a>
                <small>3</small>
            </li>
            <li>
                <span class="usr_name">
                    <img src="images/resources/tx1.png" alt="">
                </span>
                <a href="#" title="">勇爷</a>
                <small>20</small>
            </li>
            <li>
                <span class="usr_name">
                    <img src="images/resources/sn.png" alt="">
                </span>
                <a href="#" title="">耀爷</a>
                <small>20</small>
            </li>
            <li>
                <span class="usr_name">
                    <img src="images/resources/tx2.png" alt="">
                </span>
                <a href="#" title="">admin</a>
                <small>20</small>
            </li>
        </ul>
        <a href="#" title="" class="more-ch"><i class="icon-arrow_below"></i>更多</a>
    </div>
    <!--sd_menu end-->
    <div class="sd_menu">
        <ul class="mm_menu">
            <li>
                <span>
                    <i class="icon-settings"></i>
                </span>
                <a href="#" title="">设置</a>
            </li>
            <li>
                <span>
                    <i class="icon-flag"></i>
                </span>
                <a href="#" title="">反馈日志</a>
            </li>
            <li>
                <span>
                    <i class="icon-logout"></i>
                </span>
                <a href="#" title="">退出登录</a>
            </li>
        </ul>
    </div>
    <!--sd_menu end-->
    <div class="sd_menu m_linkz">
        <ul class="mm_menu">
            <li><a href="#">关于我们</a></li>
            <li><a href="#">社区规则</a></li>
            <li><a href="#">隐私</a></li>
            <li><a href="#">技术团队</a></li>
            <li><a href="#">博客</a></li>
            <li><a href="#">联系我们 </a></li>
            <li><a href="#">给我们投食</a></li>
            <li><a href="#">FAQ</a></li>
        </ul>
        <span>主题</span>
    </div>
    <!--sd_menu end-->
    <div class="sd_menu bb-0">
        <ul class="social_links">
            <li>
                <a href="#" title="">
                    <i class="icon-facebook-official"></i>
                </a>
            </li>
            <li>
                <a href="#" title="">
                    <i class="icon-twitter"></i>
                </a>
            </li>
            <li>
                <a href="#" title="">
                    <i class="icon-instagram"></i>
                </a>
            </li>
        </ul>
        <!--social_links end-->
    </div>
    <!--sd_menu end-->
    <div class="dd_menu"></div>
</div>
</div>`
Vue.component('my-header', {
    template: headerTemplate,
    data() {
        return {
            accountMenu: true,
            leftMenu: true,
            search: "",
            user: ""
        }

    },
    created() {
        if(this.getParameter("search")){
            console.log(this.getParameter("search"))
            this.search=window.decodeURIComponent(this.getParameter("search"))
        }
        this.getUserInfo()
    },
    methods: {
        closeMenu() {
            // this.$refs.leftMenu.className = 'side_menu leaveTop';
        },
        showMenu() {
            if (this.accountMenu) {
                document.getElementsByClassName("account-menu")[0].style.display = "block";
                this.accountMenu = !this.accountMenu;
            } else {
                document.getElementsByClassName("account-menu")[0].style.display = "none";
                this.accountMenu = !this.accountMenu;
            }


        },
        showLeftMenu() {
            if (this.leftMenu) {
                document.getElementsByClassName("side_menu")[0].className += ' active';
                this.leftMenu = !this.leftMenu;
            } else {
                document.getElementsByClassName("side_menu")[0].className = 'side_menu leaveTop';
                this.leftMenu = !this.leftMenu;
            }
        },
        history() {
            location.href = "History_Page.html"
        },
        toSearch() {
            location.href = "Search_Page.html?search=" + this.search
        },
        getUserInfo() {
            if (JSON.parse(localStorage.getItem("user"))) {
                this.user = JSON.parse(localStorage.getItem("user"))
            }
        },
        getParameter(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
            var r = location.search.substr(1).match(reg);
            if (r != null) return (r[2]);
            return null;
        },
        loginOut(){
            if( localStorage.getItem("user")){
                localStorage.removeItem("user")
                location.href="index.html"
            }else {
                alert("您尚未登录")
            }

        }

    }
})
